//有一组样式,在多个组件中都需要使用
//如果将这一组样式,分别写到每个组件中,非常陈余
//所以可以将这一组样式,进行封装一个个对象,这样方式叫做mixin
//在使用的时候只要导入mixin名字就能够使用里面所以的样式

@mixin clearfix {
  &:after {
    content: "";
    display: table;
    clear: both;
  }
}

@mixin scrollBar {
  &::-webkit-scrollbar-track-piece {
    background: #d3dce6;
  }

  &::-webkit-scrollbar {
    width: 6px;
  }

  &::-webkit-scrollbar-thumb {
    background: #99a9bf;
    border-radius: 20px;
  }
}

@mixin relative {
  position: relative;
  width: 100%;
  height: 100%;
}
